<template>
  <div>
    <el-sub-menu :key="item.path" :index="item.path" v-if="item.children">
      <template v-slot:title>
        <!--<i :class="item.iconClass"></i>-->
        <img class="menuIcon" :src="`./static/img/${item.name}.svg`" alt="">
        <span>{{ item.name }}</span>
      </template>
      <MenuRouter v-for="child in item.children" :key="child.path" :item="child">
      </MenuRouter>
    </el-sub-menu>

    <el-menu-item :index="item.path" v-else>
      <!--<i :class="item.iconClass"></i>-->
      <img class="menuIcon" :src="`./static/img/${item.name}${active ? '-蓝' : ''}.svg`" alt="">
      <span>{{ item.name }}</span>
    </el-menu-item>
  </div>
</template>

<script setup>
import eventBus from '@/common/uilts/eventBus'
import { watch, ref, defineProps } from 'vue'

const props = defineProps({
  item: Object
})

// 将 prop 的值绑定到一个响应式状态上
const item = ref(props.item)
let active = ref(false)

// 监视这些响应式状态
watch(() => props.item, () => {
  console.log('path为: ', item.value)
})

eventBus.on('activeMenu', (path) => {
  console.log(`path -> [${path}]`)
  active = props.item.path === path
  if (active.value) {
    console.log(`EventBus On [activeMenu] -> [${path}]`)
  }
})

</script>

<style lang="scss">
.menuIcon{
  display: flex;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/*选中菜单样式*/
.el-menu-item.is-active {
  /* 覆盖默认的选中背景色 */
  background-color: #434A50 !important;
  /* 覆盖默认的 selected 边框样式 */
  border-right: 3px solid #00BFFF;
}

/* 设置左边导航栏和顶部菜单不对齐的方法 */
.el-menu-item {
  border-right-width: 0;
}
</style>
